import React from 'react'
import { Card } from 'antd'
import ReactEcharts from 'echarts-for-react';
import echartTheme from '../echartTheme'
import themeLight from '../themeLight'
// import echarts from 'echarts'
import echarts from 'echarts/lib/echarts'
// 引入饼图和折线图
import 'echarts/lib/chart/pie'
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/markPoint';
import { axhttp } from '../../../utils/axhttp';
import { datehelper } from '../../../utils/help';

const url = {
    read: '/api/order/readx',
}
export default class Pie extends React.Component {
    state = {
        data: [
            {
                value: 1000,
                name: '00:00-03:00'
            }, {
                value: 1000,
                name: '03:00-06:00'
            }, {
                value: 2000,
                name: '06:00-09:00'
            }, {
                value: 1500,
                name: '09:00-12:00'
            }, {
                value: 3000,
                name: '12:00-15:00'
            }, {
                value: 2000,
                name: '15:00-18:00'
            }, {
                value: 1200,
                name: '18:00-21:00'
            }, {
                value: 1200,
                name: '21:00-24:00'
            }
        ]
    }

    componentWillMount() {
        echarts.registerTheme('Imooc', themeLight);
        this.handleReadOrder();
    }

    handleReadOrder = () => {
        axhttp.getXhr(url.read).then(res => {
            const d = [
                {
                    value: 0,
                    name: '00:00-03:00'
                }, {
                    value: 0,
                    name: '03:00-06:00'
                }, {
                    value: 0,
                    name: '06:00-09:00'
                }, {
                    value: 0,
                    name: '09:00-12:00'
                }, {
                    value: 0,
                    name: '12:00-15:00'
                }, {
                    value: 0,
                    name: '15:00-18:00'
                }, {
                    value: 0,
                    name: '18:00-21:00'
                }, {
                    value: 0,
                    name: '21:00-24:00'
                }
            ];
            res.data.list.forEach(i => {
                const timeSlotName = datehelper.getTimeSlot(i.createTime);
                const f = d.find(j => j.name === timeSlotName);
                if (f) {
                    f.value = f.value + 1;
                }
                else {
                    d.push({
                        name: timeSlotName,
                        value: 1,
                    })
                }
            });

            this.setState({
                data: d,
            });
        });
    }

    getOption() {
        const { data } = this.state;

        let option = {
            // title: {
            //     text: '用户骑行订单',
            //     x: 'center'
            // },
            legend: {
                // orient: 'vertical',
                // right: 10,
                // top: 20,
                // bottom: 20,
                data: [
                    '00:00-03:00',
                    '03:00-06:00',
                    '06:00-09:00',
                    '09:00-12:00',
                    '12:00-15:00',
                    '15:00-18:00',
                    '18:00-21:00',
                    '21:00-24:00',
                ]
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            series: [
                {
                    name: '开启行程数量',
                    type: 'pie',
                    radius: ['50%', '80%'],
                    center: [
                        '50%', '60%'
                    ],
                    data: data,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        }
        return option;
    }

    render() {
        return (
            <ReactEcharts
                option={this.getOption()}
                theme="Imooc"
                notMerge={true}
                lazyUpdate={true}
                style={{ height: 400 }}
            />
        );
    }
}